<template>
    <div class="main">
        <Topbox/>
        <div class="common-layout">
            <el-container class="">
                <el-aside width="20%" class="asideBox">
                    <SideMenu/>
                </el-aside>
                <el-main class="mainBox">
                    <RouterView></RouterView> 
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script setup>
import { ref,watch } from 'vue'
import Topbox from '../components/Topbox.vue'
import SideMenu from '../components/SideMenu.vue'


// import { usefromToStore } from '../stores/fromTo'


// const store = usefromToStore()


// watch(
//     () => store.fromTo, 
//     (newValue) => {
//     console.log('watch 已触发', newValue)
//     // if(store.fromTo.fromTo == '语音预警'){
//     //     menuList.value = asyncRoutes[0].children 
//     // }else if(store.fromTo.fromTo == '雷达预警'){
//     //     menuList.value = asyncRoutes[1].children 
//     // }else{
//     //     menuList.value = asyncRoutes[0].children 
//     // }
// })

</script>
<style>

.main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.common-layout {
    padding: 10px;
    flex:1;
    background:url('../static/bg.png') no-repeat;
    background-size: 100% auto;
}
.asideBox{
    background: url(../static/menu-list-bg.png) no-repeat;
    padding: 0 10px;
    background-size: 100% auto;
}
.common-layout .el-container {
  height: 100%;
} 
.mainBox{
    margin: 0 20px 0 20px;
    background: url(../static/alarm-list-bg.png) no-repeat;
}

/* 页面表格 */
.speech {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.topSearch {
  height: 50px;
  margin-top: 30px;
  margin-left: 20px;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  /* text-align: center; */
  /* border-right: solid 1px var(--el-border-color);
  flex: 1; */
  margin-right: 5px;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.searchBtn {
  background: url(../../static/btn-bg.png) no-repeat;
  background-size: 100% auto;
  width: 97px;
  height: 32px;
  border: none;
  margin-left: 5px;
}
.searchTxt {
  color: #00c4d7 !important;
}

.tableBox{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.tableBox .el-table{
  height: 100%;
  background-color: transparent;
}
::v-deep .el-table__inner-wrapper:before{
  width: 0 !important;
  background-color: transparent !important;
}
.el-table__inner-wrapper:before{
  width: 0 !important;
  background-color: transparent !important;
}
table{
 margin: auto;
}
.el-table th.el-table__cell{
    background-color: transparent;
}
.el-table tr{
    background-color: transparent;
}
.el-table td.el-table__cell{
    border-bottom: 1px solid rgb(34, 62, 112);
}
.el-table th.el-table__cell.is-leaf{
    font-weight: 500;
    border-bottom: 2px solid rgb(0, 196, 215)
}
.el-table .cell{
    font-size: 18px;
    color: #81B3F3;
    text-align: center;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background: transparent;
}
.el-button:hover{
  background-color: transparent;
}
</style>